import React from 'react'
import "./index.scss"
import { useSelector,useDispatch } from 'umi'

export default function index() {
    const list=useSelector((state:any)=>{
        return state.todoDva.list
    })
    const dispatch = useDispatch()

    // const [list,setList]=React.useState([
    //     {task:'干饭',status:'done',id:0},
    //     {task:'睡觉',status:'undone',id:1},
    //     {task:'打游戏',status:'done',id:2},
    // ])
    // const [current,setCurrent]=React.useState('all')
    // const inputref=React.useRef<HTMLInputElement>(null)
    // function add(){
    //       const task=(inputref.current as HTMLInputElement).value
    //     const m={task,status:"undone",id:list.length};
    //     list.unshift(m);
    //        ( inputref.current as HTMLInputElement).value=''
    //     setList([...list])

    // }
    // function changeStatus(id:number){
    //     for (const item of list) {
    //         if(item.id==id){
    //             item.status=(item.status=="done"?'undone':"done")
    //             break
    //         }
    //     }
    //     setList([...list])

    // }
    // function changs (current:string){
    //     setCurrent(current)
    // }

 let newlist=   React.useMemo(()=>{
        switch (current) {
            case 'done':
             return   list.filter(item=>item.status=="done")
                
            case "undone":
                return list.filter(item=>item.status=="undone")
            default:
                return list
        }


    },[list,current])

  return (
    <div>
            <div><input ref={inputref} type="text" /><button onClick={add}>添加任务</button></div>

            <ul>
                {newlist.map(item=>{
                    return <li key={item.id} className={item.status} onClick={()=>changeStatus(item.id)}>{item.task}</li>
                })}
            </ul>
            <button onClick={()=>changs('all')} className={current=="all"?'activte':""}>全部</button>
            <button onClick={()=>changs('done')} className={current=="done"?'activte':""}>已做</button>
            <button onClick={()=>changs('undone')} className={current=="undone"?'activte':""}>未做</button>
    </div>
  )
}
